<template>
  <div class="component-test">
    <el-card class="mb-4">
      <template #header>
        <div class="card-header">
          <h3>基础组件测试</h3>
        </div>
      </template>

      <h3>基础表格组件</h3>
      <el-table
        v-loading="false"
        :data="tableData"
        border
        style="width: 100%"
        @row-dblclick="handleRowDblClick"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="age" label="年龄" width="80" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <span :class="`status-${row.status}`">
              {{ statusConfig[row.status]?.text || '未知' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <h3>基础分页组件</h3>
      <BasePagination
        v-model="pagination.current"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-card>

    <el-card class="mb-4">
      <template #header>
        <div class="card-header">
          <h3>业务组件测试</h3>
        </div>
      </template>

      <h3>客户等级选择器</h3>
      <CustomerGradeSelector v-model="customerGrade" />

      <h3>客户来源选择器</h3>
      <CustomerSourceSelector v-model="customerSource" />

      <h3>客户状态选择器</h3>
      <CustomerStatusSelector v-model="customerStatus" />

      <h3>地区级联选择器</h3>
      <RegionCascader
        v-model="regionData"
        emit-path
        :placeholder="'请选择省/市/区'"
        @change="handleRegionChange"
      />
    </el-card>

    <el-card class="mb-4">
      <template #header>
        <div class="card-header">
          <h3>公共组件测试</h3>
        </div>
      </template>

      <h3>全局抽屉组件</h3>
      <el-button type="primary" @click="drawerVisible = true">打开抽屉</el-button>

      <GlobalDrawer v-model="drawerVisible" title="测试抽屉" size="50%">
        <p>这是一个全局抽屉组件的测试内容</p>
        <BaseForm :model="formModel" :fields="formFields" @submit="handleFormSubmit" />
      </GlobalDrawer>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { ElMessage } from 'element-plus'
  import { BasePagination, BaseForm } from '@/components'
  import CustomerGradeSelector from '@/components/business/customer/CustomerGradeSelector.vue'
  import CustomerSourceSelector from '@/components/business/customer/CustomerSourceSelector.vue'
  import CustomerStatusSelector from '@/components/business/customer/CustomerStatusSelector.vue'
  import { RegionCascader } from '@/components/business/region'
  import { GlobalDrawer } from '@/components/common'

  // 定义表格数据的类型
  interface TableDataItem {
    id: number
    name: string
    age: number
    status: number
  }

  // 表格数据
  const tableData = ref<TableDataItem[]>([
    { id: 1, name: '张三', age: 25, status: 1 },
    { id: 2, name: '李四', age: 30, status: 2 },
    { id: 3, name: '王五', age: 28, status: 3 },
  ])

  // 表格列配置
  const tableColumns = ref([
    { prop: 'id', label: 'ID', width: 80 },
    { prop: 'name', label: '姓名', width: 120 },
    { prop: 'age', label: '年龄', width: 80 },
    { prop: 'status', label: '状态', slot: 'status' },
  ])

  // 状态配置接口
  export interface StatusConfigItem {
    type: string
    text: string
  }

  export interface StatusConfig {
    [key: number]: StatusConfigItem
  }

  // 状态配置
  const statusConfig: StatusConfig = {
    1: { type: 'success', text: '正常' },
    2: { type: 'warning', text: '待审核' },
    3: { type: 'danger', text: '已禁用' },
  }

  // 分页数据
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 100,
  })

  // 表单数据
  const formModel = reactive({
    name: '',
    email: '',
  })

  // 表单字段
  const formFields = ref([
    { prop: 'name', label: '姓名', type: 'input', placeholder: '请输入姓名' },
    { prop: 'email', label: '邮箱', type: 'input', placeholder: '请输入邮箱' },
  ])

  // 业务组件数据
  const customerGrade = ref(null)
  const customerSource = ref(null)
  const customerStatus = ref(null)
  const regionData = ref<string>('')

  // 处理地区选择变化
  const handleRegionChange = (value: string | number[], labels: string[]) => {
    console.log('地区选择变化:', value, labels)
  }

  // 抽屉可见性
  const drawerVisible = ref(false)

  // 表格事件处理
  const handleEdit = (row: TableDataItem) => {
    ElMessage.info(`编辑用户: ${row.name}`)
  }

  const handleDelete = (row: TableDataItem) => {
    ElMessage.info(`删除用户: ${row.name}`)
  }

  // 行双击事件
  const handleRowDblClick = (row: TableDataItem) => {
    ElMessage.info(`双击了用户: ${row.name}`)
  }

  // 分页事件处理
  const handleCurrentChange = (current: number) => {
    ElMessage.info(`当前页: ${current}`)
  }

  const handleSizeChange = (size: number) => {
    ElMessage.info(`页面大小: ${size}`)
  }

  // 表单提交处理
  const handleFormSubmit = () => {
    ElMessage.success('表单提交成功')
  }
</script>

<style scoped>
  .component-test {
    padding: 20px;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-header h3 {
    margin: 0;
  }

  .status-success {
    color: #67c23a;
  }

  .status-warning {
    color: #e6a23c;
  }

  .status-danger {
    color: #f56c6c;
  }
</style>
